<template>
	<div>
		<el-dialog :title="title" :visible.sync="dialogVisible" width="60%" append-to-body :closeOnClickModal="false" center :before-close="cancel">
            <el-form :model="formData" ref="formData" :rules="rules"  label-width="100px" label-suffix=":">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="姓名" prop="driverName">
                            <el-input v-model="formData.driverName"  placeholder="请输入..."></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="性别"  prop="sex">
                            <el-select v-model="formData.sex" placeholder="请选择..." clearable> 
                                <el-option v-for="dict in sexType" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop="driverPhone">
                            <el-input v-model="formData.driverPhone"  placeholder="请输入..."></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车牌号" prop="carNum">
                            <el-input v-model="formData.carNum" clearable placeholder="请输入..."></el-input>
                        </el-form-item>
                    </el-col>
                     <el-col :span="12">
                        <el-form-item label="是否自备车"  prop="isSelfProvided">
                            <el-select v-model="formData.isSelfProvided" placeholder="请选择..." clearable> 
                                <el-option v-for="dict in providedType" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="状态"  prop="state">
                            <el-select v-model="formData.state" placeholder="请选择..." clearable> 
                                <el-option v-for="dict in stateType" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"/>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车容量" prop="carCapacity">
                            <el-input-number :controls="false" :min='0' :precision="2" v-model="formData.carCapacity" clearable placeholder="请输入..." style="width:90%"></el-input-number> L
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
						<el-form-item label="车型及描述">
							<el-input v-model="formData.carType" placeholder="请输入..." type="textarea" cols="5" rows="4"/>
						</el-form-item>
					</el-col>
                </el-row>
            </el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" icon="el-icon-finished" @click="submitForm">保 存</el-button>
				<el-button type="danger" @click="cancel" icon="el-icon-circle-close">关 闭</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	// import { addCar, updateCar,detailCar } from "@/api/general/car";
	// import { getShopId } from "@/utils/auth";//店铺id，司机列表传

	export default {
	   components: {},
	   props: [],
		data() {
			return {
                //标题&&弹框
                title: '',
                dialogVisible:false,
                formData:{//表单
                    shopId: getShopId(), // 店铺id
                    driverId:'',//司机id
                    driverName:'',//姓名
                    sex:'',//性别
                    driverPhone:'',//手机号
                    carNum:'',//车牌号
                    isSelfProvided:'',//是否自备车
                    carType:'',//车型及描述
                    state:1,//状态
                    carCapacity:'',//车容量
                },
                sexType:[//性别
                    {dictValue:1,dictLabel:'男'},
					{dictValue:0,dictLabel:'女'}
                ],
                providedType:[//是否自备车
                    {dictValue:1,dictLabel:'自备'},
					{dictValue:2,dictLabel:'非自备'}
                ],
                stateType:[//状态
					{dictValue:1,dictLabel:'启用中'},
					{dictValue:0,dictLabel:'禁用中'}
				],//状态下拉框
                rules: {
                    driverName:[{ required: true, message: '不能为空',trigger: 'blur' }],
                    sex:[{ required: true, message: '不能为空',trigger: 'change' }],
                    driverPhone: [
                        { required: true, message: '不能为空',trigger: 'blur' },
                        {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,message: "请输入正确的手机号码",trigger: "blur" }
                    ],
                    carNum:[{ required: true, message: '不能为空',trigger: 'blur' }],
					isSelfProvided:[{ required: true, message: '不能为空',trigger: 'change' }],
                    state:[{ required: true, message: '不能为空',trigger: 'change' }],
                    carCapacity:[{ required: true, message: '不能为空',trigger: 'blur' }],
				},
			};
		},
        created(){},
		mounted(){},
		methods: {
           openAdd(){ // 新增时打开弹框
                // this.getOptions()//新增-下拉框
                this.title='司机新增'
                this.dialogVisible = true
            },
            openEdit(row){
                this.title='司机修改'
                this.dialogVisible = true
                this.getInfo({driverId:row.driverId})
            },
            statusStart(row){//状态:0禁用，1启用
                const driverNames = row.driverName;
				const driverPhones = row.driverPhone;
                const params = {
                    state:1,
                    driverId:row.driverId
                }    
				this.$confirm('您确定启用 "'+driverNames+ '(' + driverPhones + ')' +' " 的账号吗?启用后,配货时将可选择该改司机送货', "警告", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type:'warning'
				}).then(()=>{
                    updateCar(params).then(response => {
                        this.$message({ type: "success", message: "启用成功!",});
                        this.$emit('getData')//刷新列表
                    });
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消更改',
					})
				})
            },
            statusStop(row){//状态:0停用
                const driverNames = row.driverName;
				const driverPhones = row.driverPhone;
                const params = {
                    state:0,
                    driverId:row.driverId
                }      
				this.$confirm('您确定禁用 "'+driverNames+ '(' + driverPhones + ')' +' " 的账号吗?禁用后,配货时将不可选择该司机送货', "警告", {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type:'warning'
				}).then(()=>{
                    updateCar(params).then(response => {
                        this.$message({ type: "success", message: "禁用成功!",});
                        this.$emit('getData')//刷新列表
                    });
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消更改',
					})
				})
            },
            getInfo(driverId){//详情
                detailCar(driverId).then(resp=> {
                    if(resp.code=='') {
                        this.formData = resp.data
                    }
                })
            },
             /** 提交按钮 */
            submitForm() {
                this.$refs["formData"].validate(valid => {
                    if (valid) {
                        if (this.formData.driverId) {
                            updateCar(this.formData).then(response => {
                                this.$message({ type: "success", message: "修改成功!",});
                                this.dialogVisible = false
								this.$emit('getData')//刷新列表
								this.cancel()//清空输入框
                            });
                        } else {
                            addCar(this.formData).then(response => {
                                this.$message({ type: "success", message: "新增成功!",});
                                this.dialogVisible = false;
								this.$emit('getData')
								this.cancel()
                            });
                        }
                    }
                });
            },
            cancel(){//关闭清空输入框
                this.dialogVisible = false
                this.$refs.formData.resetFields()
                this.formData = {//重置输入框，放初始值
                    shopId: getShopId(), // 店铺id
                    driverId:'',//司机id
                    driverName:'',//姓名
                    sex:'',//性别
                    driverPhone:'',//手机号
                    driverName:'',//车牌号
                    isSelfProvided:'',//是否自备车
                    carType:'',//车型及描述
                    state:1,//状态
                    carCapacity:'',//车容量
                }
            },
		},

	}
</script>